<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRMEB - 用户管理系统</title>
    <style>
        body {
            font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 0;
            display: flex;
            min-height: 100vh;
        }
        .sidebar {
            width: 250px;
            background-color: #f9f9f9;
            border-right: 1px solid #eee;
            overflow-y: auto;
            padding: 20px 0;
            flex-shrink: 0;
        }
        .main-content {
            flex-grow: 1;
            padding: 20px;
            max-width: 1200px;
            margin: 0 auto;
            overflow-y: auto;
        }
        .header {
            text-align: center;
            margin-bottom: 30px;
            border-bottom: 1px solid #eee;
            padding-bottom: 20px;
        }
        .header h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        .content {
            margin-bottom: 30px;
        }
        .content h3 {
            font-size: 20px;
            margin-bottom: 15px;
            color: #333;
        }
        .content p {
            margin-bottom: 15px;
            font-size: 16px;
        }
        .image-container {
            text-align: center;
            margin: 20px 0;
        }
        .image-container img {
            max-width: 100%;
            height: auto;
            border: 1px solid #eee;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .footer {
            margin-top: 40px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            color: #666;
            font-size: 14px;
        }
        .stats {
            display: flex;
            margin-top: 20px;
            font-size: 14px;
            color: #666;
        }
        .stats div {
            margin-right: 20px;
            display: flex;
            align-items: center;
        }
        .stats img {
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }
        
        /* 导航栏样式 */
        .nav-item {
            cursor: pointer;
            padding: 10px 20px;
            font-size: 16px;
            border-bottom: 1px solid #eee;
            position: relative;
        }
        .nav-item:hover {
            background-color: #f0f0f0;
        }
        .nav-item.active {
            background-color: #e6f7ff;
            border-right: 3px solid #1890ff;
        }
        .nav-item .arrow {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
        }
        .subnav {
            padding-left: 20px;
            display: none;
        }
        .subnav.open {
            display: block;
        }
        .subnav-item {
            padding: 8px 20px;
            font-size: 14px;
            cursor: pointer;
        }
        .subnav-item:hover {
            color: #1890ff;
        }
        .subnav-item.active {
            color: #1890ff;
            font-weight: bold;
        }
        .current-page {
            color: #1890ff;
            font-weight: bold;
        }
        
        /* 标签页样式 */
        .tab-container {
            display: none;
        }
        .tab-container.active {
            display: block;
        }
        .tab-nav {
            display: flex;
            border-bottom: 1px solid #eee;
            margin-bottom: 20px;
        }
        .tab-nav-item {
            padding: 10px 20px;
            cursor: pointer;
            margin-right: 5px;
            border: 1px solid transparent;
            border-bottom: none;
        }
        .tab-nav-item.active {
            border-color: #eee;
            border-bottom-color: #fff;
            color: #1890ff;
            font-weight: bold;
        }
        .feature-list {
            margin-top: 20px;
        }
        .feature-item {
            margin-bottom: 30px;
        }
        .feature-item h4 {
            font-size: 18px;
            margin-bottom: 10px;
            color: #1890ff;
        }
    </style>
</head>
<body>
    <div class="sidebar">
        <div class="nav-item">
            使用手册 <span class="arrow">▼</span>
        </div>
        <div class="subnav open">
            <div class="nav-item">
                用户 <span class="arrow">▼</span>
            </div>
            <div class="subnav open">
                <div class="subnav-item" data-tab="user-statistics">用户统计</div>
                <div class="subnav-item" data-tab="user-management">用户管理</div>
                <div class="subnav-item" data-tab="user-groups">用户分组</div>
                <div class="subnav-item" data-tab="user-tags">用户标签</div>
                <div class="subnav-item" data-tab="user-levels">用户等级</div>
                <div class="subnav-item" data-tab="user-config">用户配置</div>
            </div>
            <div class="nav-item">
                订单 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">订单统计</div>
                <div class="subnav-item">订单管理</div>
                <div class="subnav-item">售后订单</div>
                <div class="subnav-item">收银订单</div>
                <div class="subnav-item">核销记录</div>
                <div class="subnav-item">订单配置</div>
                <div class="subnav-item">移动端订单管理</div>
            </div>
            <div class="nav-item">
                商品 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">商品类型</div>
                <div class="subnav-item">商品统计</div>
                <div class="subnav-item">商品管理</div>
                <div class="subnav-item">商品分类</div>
                <div class="subnav-item">商品规格</div>
                <div class="subnav-item">商品评论</div>
                <div class="subnav-item">商品运费</div>
                <div class="subnav-item">常见问题</div>
                <div class="subnav-item">商品配置</div>
                <div class="subnav-item">送礼收礼</div>
                <div class="subnav-item">商品标签</div>
                <div class="subnav-item">商品保障</div>
                <div class="subnav-item">商品参数</div>
                <div class="subnav-item">商品到手价</div>
            </div>
            <div class="nav-item">
                营销 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">优惠券</div>
                <div class="subnav-item">积分管理</div>
                <div class="subnav-item">抽奖管理</div>
                <div class="subnav-item">砍价管理</div>
                <div class="subnav-item">拼团管理</div>
                <div class="subnav-item">秒杀管理</div>
                <div class="subnav-item">付费会员</div>
                <div class="subnav-item">直播管理</div>
                <div class="subnav-item">用户充值</div>
                <div class="subnav-item">每日签到</div>
                <div class="subnav-item">渠道码</div>
                <div class="subnav-item">新人礼</div>
            </div>
            <div class="nav-item">
                分销 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">分销规则说明</div>
                <div class="subnav-item">分销配置</div>
                <div class="subnav-item">分销等级</div>
                <div class="subnav-item">分销员管理</div>
                <div class="subnav-item">事业部</div>
                <div class="subnav-item">分销员申请</div>
            </div>
            <div class="nav-item">
                客服 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">客服说明</div>
                <div class="subnav-item">客服添加</div>
                <div class="subnav-item">客服工作台</div>
                <div class="subnav-item">客服话术</div>
                <div class="subnav-item">用户留言</div>
                <div class="subnav-item">自动回复</div>
                <div class="subnav-item">客服配置</div>
                <div class="subnav-item">企业微信客服</div>
            </div>
            <div class="nav-item">
                财务 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">交易统计</div>
                <div class="subnav-item">财务操作</div>
                <div class="subnav-item">财务记录</div>
                <div class="subnav-item">佣金记录</div>
                <div class="subnav-item">余额记录</div>
            </div>
            <div class="nav-item">
                内容 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">文章管理</div>
                <div class="subnav-item">文章分类</div>
            </div>
            <div class="nav-item">
                装修 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">首页装修</div>
                <div class="subnav-item">商品分类</div>
                <div class="subnav-item">个人中心</div>
                <div class="subnav-item">数据配置</div>
                <div class="subnav-item">主题风格</div>
                <div class="subnav-item">素材管理</div>
                <div class="subnav-item">链接管理</div>
            </div>
            <div class="nav-item">
                应用 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">公众号</div>
                <div class="subnav-item">小程序</div>
                <div class="subnav-item">APP</div>
                <div class="subnav-item">PC</div>
            </div>
            <div class="nav-item">
                设置 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">系统设置</div>
                <div class="subnav-item">消息管理</div>
                <div class="subnav-item">协议设置</div>
                <div class="subnav-item">小票打印</div>
                <div class="subnav-item">管理权限</div>
                <div class="subnav-item">发货设置</div>
                <div class="subnav-item">接口配置</div>
            </div>
            <div class="nav-item">
                维护 <span class="arrow">▼</span>
            </div>
            <div class="subnav">
                <div class="subnav-item">开发配置</div>
                <div class="subnav-item">安全维护</div>
                <div class="subnav-item">数据维护</div>
                <div class="subnav-item">对外接口</div>
                <div class="subnav-item">语言设置</div>
                <div class="subnav-item">开发工具</div>
            </div>
            <div class="nav-item">
                商城硬件 <span class="arrow">▼</span>
            </div>
        </div>
    </div>
    
    <div class="main-content">
        <!-- 用户统计页面 -->
        <div id="user-statistics" class="tab-container active">
            <div class="header">
                <h1>用户统计</h1>
            </div>

            <div class="content">
                <h3>用户统计，查看商城用户的统计信息。</h3>
                <p>可查看用户基础数据，走势图，可以根据时间，用户类型进行搜索，支持用户信息导出</p>
                
                <div class="image-container">
                    <img src="https://doc.crmeb.com/uploads/single/v52/20230911/ce8d67ca81e09f46b35a100998051938.png" alt="用户统计界面">
                </div>
            </div>
        </div>

        <!-- 用户管理页面 -->
        <div id="user-management" class="tab-container">
            <div class="header">
                <h1>用户管理</h1>
            </div>

            <div class="content">
                <h3>用户管理。可查询，添加，编辑，设置用户信息。</h3>
                
                <div class="feature-list">
                    <div class="feature-item">
                        <h4>用户查询</h4>
                        <p>查看商城所有用户，支持通过用户昵称、手机号、用户UID搜索；支持用户数据批量导出；查询/导出具体用户信息。</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/c2d256ce67f5032440757a1ec0675ef5.png" alt="用户查询界面">
                        </div>
                    </div>

                    <div class="feature-item">
                        <h4>后台添加用户</h4>
                        <p>点击【添加用户】按钮，弹出页面输入用户基础信息。除标星项目外，其它均可置空。</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/v52/20230918/b0a96bbb88fb8afa77bf7379d1b90fa0.png" alt="添加用户界面">
                        </div>
                    </div>

                    <div class="feature-item">
                        <h4>用户设置</h4>
                        <p>可以发送优惠券，批量设置分组，设置标签。用户列表最后的更多里面可以修改用户的积分、余额，单独设置分组标签，修改上级推广员等</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/d19b2514114d7e07f17258bc72d17d3f.png" alt="用户设置界面">
                        </div>
                    </div>

                    <div class="feature-item">
                        <h4>发送优惠券</h4>
                        <p>发送优惠券给指定用户。用户可于【个人中心—>优惠券】中可以查找该优惠券。</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/f4d709cffe3c40de597ca4249670f28a.png" alt="发送优惠券界面">
                        </div>
                    </div>

                    <div class="feature-item">
                        <h4>用户详情</h4>
                        <p>查看用户的全部数据以及修改用户基本信息。详情页面点击【编辑】可修改【用户信息】中的所有项，其余页面信息不可编辑。</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/1b9fe4e4ae98b73b59ba19b4900fb461.png" alt="用户详情界面">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户分组页面 -->
        <div id="user-groups" class="tab-container">
            <div class="header">
                <h1>用户分组</h1>
            </div>

            <div class="content">
                <h3>用户分组用于在用户列表中进行快速搜索对应的用户。</h3>
                <p>添加（输入分组名称），修改（修改分组名称），删除分组</p>
                
                <div class="image-container">
                    <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/cfaa30b335b3e4cb2a58ddc80d9e0fb6.png" alt="用户分组界面">
                </div>
            </div>
        </div>

        <!-- 用户标签页面 -->
        <div id="user-tags" class="tab-container">
            <div class="header">
                <h1>用户标签</h1>
            </div>

            <div class="content">
                <h3>用户标签，包括标签分类，用户标签配置</h3>
                <p>用户标签可实现用户列表中用户信息的快速搜索。可以进行标签分类以及用户标签的添加，修改，删除操作</p>
                
                <div class="feature-list">
                    <div class="feature-item">
                        <h4>标签分类</h4>
                        <p>添加标签分类（分类名称、排序），编辑分类（名称，排序），删除分类</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/2a8ce9d07cadbbb96db9e2931d4c6b63.png" alt="标签分类界面">
                        </div>
                    </div>

                    <div class="feature-item">
                        <h4>添加标签</h4>
                        <p>添加标签（选择分类，标签名称），修改标签（分类，标签名称），删除标签</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/6a213545dd8907607a1ae55afeed6253.png" alt="添加标签界面">
                        </div>
                        <p>标签相关：【商品管理—>添加商品—>营销—>关联用户标签】选择标签后，购买该商品的用户会自动添加该标签。</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/09d36d7b9a35f2c43946bab8dfd5e416.png" alt="关联用户标签界面">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户等级页面 -->
        <div id="user-levels" class="tab-container">
            <div class="header">
                <h1>用户等级</h1>
            </div>

            <div class="content">
                <div class="feature-list">
                    <div class="feature-item">
                        <h4>添加用户等级</h4>
                        <p>用户等级：通过用户等级配置，不同等级的用户下单时享受对应等级折扣优惠。用户等级配置可以设置等级名称、等级解锁经验值，等级享受折扣等</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/956b9cf8fb0015e3b1812052eef19514.png" alt="添加用户等级界面">
                        </div>
                    </div>

                    <div class="feature-item">
                        <h4>等级折扣设置</h4>
                        <p>享受折扣：用户下单时处于该用户等级享受的折扣优惠。（例：90，享受9折优惠）</p>
                        <p>解锁经验值：到达该等级用户需拥有的经验值</p>
                        <p>图标：【个人中心—我的等级】页面，该等级显示的图标</p>
                        <p>用户等级背景：【个人中心—我的等级】页面，该等级的背景</p>
                    </div>

                    <div class="feature-item">
                        <h4>移动端显示</h4>
                        <p>个人中心—>我的等级，进入用户等级页面，可以查看当情等级折扣，获取经验的方法，以及当前经验</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/ce25066bedfeaf8eafcc14298bd4cda7.png" alt="移动端显示界面">
                        </div>
                        <p>用户下单时根据用户等级自动计算对应折扣</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/v52/20231007/70b052683b050f9a41558840b589a207.png" alt="下单折扣界面">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 用户配置页面 -->
        <div id="user-config" class="tab-container">
            <div class="header">
                <h1>用户配置</h1>
            </div>

            <div class="content">
                <h3>用户配置包括等级配置，积分配置和新用户配置</h3>
                
                <div class="feature-list">
                    <div class="feature-item">
                        <h4>等级开关配置</h4>
                        <p>需设置用户等级是否启用，设置用户下单以及邀请新用户所获取的经验值</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/v54/20240711/c318f9ecaabd006088b33e7468506998.png" alt="等级开关配置界面">
                        </div>
                        <p>开启/关闭：系统启用（开启）或不启用（关闭）用户等级功能</p>
                        <p>订单赠送经验：下单赠送经验比例（例：实际支付一元，将获得多少经验值）</p>
                        <p>邀请新增经验：邀请一人获得多少经验值</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/mulu/20231209/41833645042955137f40f582b8c54af5.png" alt="经验值配置界面">
                        </div>
                    </div>

                    <div class="feature-item">
                        <h4>新用户配置</h4>
                        <p>需设置用户的默认头像，用户是否强制绑定手机号</p>
                        <div class="image-container">
                            <img src="https://doc.crmeb.com/uploads/single/v55/20241113/229138b7f8c57593927c5ed4955cf6b1.png" alt="新用户配置界面">
                        </div>
                        <p>用户默认头像：用户未设置头像登录时默认头像，后台添加用户时默认头像</p>
                        <p>强制手机号登录：选择强制后，用户登录时强制绑定手机号</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="stats">
            <div>
                <img src="https://doc.crmeb.com/static/iconImage/icon_eyes.png" alt="浏览量">
                <span>4536人看过该文档</span>
            </div>
            <div>
                <img src="https://doc.crmeb.com/static/iconImage/isSupport.png" alt="点赞">
                <span>0人点赞</span>
            </div>
        </div>

        <div class="footer">
            <p>来源: CRMEB标准版 v5.6 文档</p>
            <p>原文链接: <a href="https://doc.crmeb.com/single/v56/20491">https://doc.crmeb.com/single/v56/20491</a></p>
        </div>
    </div>

    <script>
        // 导航栏交互逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const navItems = document.querySelectorAll('.nav-item');
            
            navItems.forEach(item => {
                item.addEventListener('click', function() {
                    // 获取下一个元素（子导航）
                    const subnav = this.nextElementSibling;
                    if (subnav && subnav.classList.contains('subnav')) {
                        subnav.classList.toggle('open');
                        
                        // 更改箭头方向
                        const arrow = this.querySelector('.arrow');
                        if (arrow) {
                            arrow.textContent = subnav.classList.contains('open') ? '▼' : '▶';
                        }
                    }
                });
            });

            // 标签页切换逻辑
            const tabItems = document.querySelectorAll('.subnav-item[data-tab]');
            tabItems.forEach(item => {
                item.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    
                    // 隐藏所有标签页
                    document.querySelectorAll('.tab-container').forEach(tab => {
                        tab.classList.remove('active');
                    });
                    
                    // 显示当前标签页
                    document.getElementById(tabId).classList.add('active');
                    
                    // 更新当前页面样式
                    document.querySelectorAll('.subnav-item').forEach(subItem => {
                        subItem.classList.remove('current-page');
                    });
                    this.classList.add('current-page');
                });
            });
        });
    </script>
</body>
</html> 